<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/> 
    <style type="text/css">
        #container{
            width: 55%;
            height: 80%;
            margin-top: 84px;
            margin-left: 9%;
        }
        #spot{
            height: 80%;
            float: right;
            width: 25%;
            margin-top: 0px;
            margin-right: 9%;
            padding-top: 24px;
        }
        .myNav{
            margin-bottom: 20px;
        }

    </style>

    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
   
</head>

<body class = " light-green lighten-4">
    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>

    <nav class="myNav">
      <div class="nav-wrapper   light-green darken-4">
        <a href="" class="brand-logo"> 武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">景点</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">厕所</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">广播</a></li>
          <li><a href="">反馈</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </div>
    </nav>


    <div id="container" class = "card"></div>

    <div id="spot" class="card row">
        <form class="col s12">
            <div class="row">
                <div class="input-field col s10">
                    <input placeholder="Placeholder" id="spot_name" type="text" class="validate">
                    <label for="spot_name">美食名称</label>
                </div>
                <div class="input-field col s10">
                    <textarea id="introduction" class="materialize-textarea"></textarea>
                    <label for="introduction">美食简介</label>
                </div>
                <div  class="input-field col s10">
                    <select>
                        <option value="" disabled selected>选择推荐指数</option>
                        <option value="1">一星</option>
                        <option value="2">二星</option>
                        <option value="3">三星</option>
                    </select>
                    <label>美食推荐指数</label>
                </div>

                <div class="input-field col s10 file-field">
                    <div class="btn  light-green darken-2">
                        <span>图片</span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                    </div>
                </div>
                <div class="input-field col s10 file-field">
                    <div class="btn  light-green darken-2">
                        <span>音频</span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                    </div>
                </div>     

            </div>
       
        </form>
    </div>



  
    <script>
        $(document).ready(function() {
          $('select').material_select();
        });
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:11,
            center: [116.397428, 39.90923]       
        });
    </script>

</body>
</html>